<template>
  <div>
    <div class="dialog-wrap">
      <div class="dialog-cover" v-if="isShow"></div>
      <transition name="drop">
        <div class="dialog-content" v-if="isShow">
          <div class="devicepopup">
            <div class="popupheader">
              {{popupTitle}}
              <el-button type="primary" icon="el-icon-close" size="mini" @click="closeMyself"></el-button>
            </div>
            <div class="popupcontent">
              <ul>
                <li>
                  <span>设备类型</span>
                  <div class="popupbox">
                    <el-select size='mini' v-model="devicetype" :disabled="disableda" placeholder="请选择" @change="changePlug">
                      <el-option
                        v-for="item in options"
                        :key="item.sensorid"
                        :label="item.sensorname"
                        :value="item.sensorid"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </li>
                <li>
                  <span>插件型号</span>
                  <div class="popupbox">
                    <el-select size='mini' v-model="plugnumber" placeholder="请选择"  @change="changeDevice">
                      <el-tooltip
                        v-for="item in plugList.plugininfolist"
                        placement="right"

                        width="200"

                        :content="'设备厂家:'+item.supplier+' || 产品型号:'+item.model">
                        <el-option
                          :key="item.pluginid"
                          :label="item.pluginid"
                          :value="item.pluginid"

                        >
                        </el-option>
                      </el-tooltip>
                    </el-select>
                  </div>
                </li>
                <li>
                  <span>设备ID</span>
                  <div class="popupbox">
                    <el-input
                      v-model="deviceid"
                      :disabled="true" size="mini">
                    </el-input>
                  </div>
                </li>
                <li>
                  <span>物理接口</span>
                  <div class="popupbox">
                    <el-select size='mini' v-model="physicsid" placeholder="请选择" @change="changeInterlist">
                      <el-option
                        v-for="item in pluginterlist"
                        :value="item">
                      </el-option>
                    </el-select>
                  </div>
                </li>
                <li>
                  <span>接口ID</span>
                  <div class="popupbox">
                    <el-select size='mini' v-model="Interfaceid" placeholder="请选择">
                      <el-option
                        v-for="item in interlist"
                        :value="item">
                      </el-option>
                    </el-select>
                  </div>
                </li>
                <li>
                  <span>接口地址</span>
                  <div class="popupbox">
                    <el-input v-model="address" type="number" value="number" size="mini" :maxlength="100" placeholder="请输入0-128之间的数值" max="128" min="0" ></el-input>
                  </div>
                </li>
                <li>
                  <span>设备厂家</span>
                  <div class="popupbox">
                    <el-select size='mini' v-model="plugListsupplier" placeholder="请选择" disabled >
                      <el-option
                        v-for="item in plugList.list"
                        :key="item.supplier"
                        :label="item.supplier"
                        :value="item.supplier">
                      </el-option>
                    </el-select>
                  </div>
                </li>
                <li>
                  <span>产品型号</span>
                  <div class="popupbox">
                    <el-select size='mini' v-model="plugListmode" placeholder="请选择" disabled >
                      <el-option
                        v-for="item in plugList.list"
                        :key="item.model"
                        :label="item.model"
                        :value="item.model">
                      </el-option>
                    </el-select>
                  </div>
                </li>
                <li>
                  <span>设备名称</span>
                  <div class="popupbox">
                    <el-input
                      placeholder='请输入设备名称' value=""  v-model="devicename"
                      size="mini">
                    </el-input>
                  </div>
                </li>
              </ul>
            </div>
            <div class="popupfooter">
              <el-button v-if="popuSafe" type="primary" size="mini" @click="safe">保存</el-button>
              <el-button v-else type="primary" size="mini" @click="safeedit">保存</el-button>
              <el-button type="primary" size="mini" @click="closeMyself">取消</el-button>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>
<script>
  import {get_chart_sensorlist,get_attr1,get_pluginInfo,get_interType} from '../../../js/public.js';
  export default {
    props: [
      "isShow",
      "popupTitle",
      "popupData",
      "disableda",
      "popuSafe",
      "popupIndex"
    ],
    data () {
      return {
        options: [/*{
        	"sensorid"1，
        	"sensorname"'温湿度传感器'
        }, {
          "sensorid"2，
        	"sensorname"'UPS'
        }, {
          value: '定位水浸传感器',
          label: '定位水浸传感器'
        }, {
          value: '烟感传感器',
          label: '烟感传感器'
        }, {
          value: '红外传感器',
          label: '红外传感器'
        },
        {
          value: '门磁传感器',
          label: '门磁传感器'
        }*/],//传感器类型
        Interfaceids:[
          {
            value: '1',
            label: '1'
          }, {
            value: '2',
            label: '2'
          }, {
            value: '3',
            label: '3'
          }, {
            value: '4',
            label: '4'
          }, {
            value: '5',
            label: '5'
          },
          {
            value: '6',
            label: '6'
          },
        ],
        devicetype:'',//设备类型
        deviceid:'',//设备ID
        devicename:'',//设备名称
        physicsid:'',//物理接口
        Interfaceid:'',//接口ID
        address:'',//接口地址
        headername:'新增设备',//弹窗的headername
        plugnumber:'',//插件型号名字
        disabled:false,//是否使能设备类型
        newad:this.popupData,//编辑室父组件传过来数据
        plugList:{},//请求的插件列表
        pluginterlist:{},//物理接口列表
        plugListmode:"", //产品型号
        plugListsupplier:'',//设备厂家
        interlist:{},//接口ID列表
        popupIndexs:this.popuSafe
      }
    },
    methods: {
      //点击关闭后通知父组件
      closeMyself () {
        this.$emit('on-close');
      },
      get_length(val){//获取含中英文的字符长度
        var len = 0;
        var v = $.trim(val);
        for(let i=0;i<v.length;i++)  {
          if(v.charCodeAt(i)>256)  {
            len += 3;
          } else {
            len++;
          }
        }
        return len;
      },
      safe(){
        //点击保存按钮后获取数据后调用ajax 通过cgi后台修改文件，
        //随后调用父组件效果；
        //父组件同时调用ajax刷新数据
        if(this.$data.devicename!=undefined&&this.$data.devicename!=''&&this.$data.Interfaceid!=''&&this.$data.devicetype!=''&&this.$data.deviceid!=''&&this.$data.plugnumber!=''&&this.$data.plugListsupplier!=''&&this.$data.plugListmode!=''&&this.$data.physicsid!=''){

          //设备名称的长度限制30个字符长度
          if(this.get_length(this.$data.devicename) > 30 ){
            this.$message({
              message: '设备名称过长,请重新输入!',
              type: 'error',
              center:true,
              showClose: true
            });
            return false;
          }

          //接口地址不能为空
          if(this.$data.address === ""){
            this.$message({
              message: '接口地址不能为空!',
              type: 'error',
              center:true,
              showClose: true
            });
            return false;
          }

          if(this.$data.physicsid == "UART"){
            if(this.$data.address<0 || this.$data.address > 128){
              this.$message({
                message: '接口地址有效范围为0~128',
                type: 'error',
                center:true,
                showClose: true
              });
              return false;
            }
          }

          let newtext={ "sensorid":this.$data.devicetype,"deviceid":this.$data.deviceid,"pluginid":this.$data.plugnumber,
            "intertype":this.$data.physicsid,"interid":this.$data.Interfaceid,"address":this.$data.address,"name":this.$data.devicename,"supplier":this.$data.plugListsupplier,"model":this.$data.plugListmode}
          this.$emit("ssafe");
          this.$store.dispatch('deviceAdd',newtext);
        }else{
          this.$message({
            message: '填写错误,请您重新检查并填写',
            type: 'error',
            center:true,
            showClose: true
          });
        }
      },
      safeedit(){
        if(this.$data.devicename!=undefined&&this.$data.devicename!=''&&this.$data.Interfaceid!=''&&this.$data.devicetype!=''&&this.$data.deviceid!=''&&this.$data.plugnumber!=''&&this.$data.plugListsupplier!=''&&this.$data.plugListmode!=''){

          //设备名称的长度限制30个字符长度
          if(this.get_length(this.$data.devicename) > 30 ){
            this.$message({
              message: '设备名称过长,请重新输入!',
              type: 'error',
              center:true,
              showClose: true
            });
            return false;
          }

          //接口地址不能为空
          if(this.$data.address === ""){
            this.$message({
              message: '接口地址不能为空!',
              type: 'error',
              center:true,
              showClose: true
            });
            return false;
          }

          if(this.$data.physicsid == "UART"){
            if(this.$data.address<0 || this.$data.address > 128){
              this.$message({
                message: '接口地址有效范围为0~128',
                type: 'error',
                center:true,
                showClose: true
              });
              return false;
            }
          }

          let newtext={"list":{ "sensorid":this.$data.devicetype,"deviceid":this.$data.deviceid,"pluginid":this.$data.plugnumber,
              "intertype":this.$data.physicsid,"interid":this.$data.Interfaceid,"address":parseInt(this.$data.address),"name":this.$data.devicename,"supplier":this.$data.plugListsupplier,"model":this.$data.plugListmode},"rows":{"rows":this.popupIndex}};

          this.$emit("ssafe");
          this.$store.dispatch('deviceEdit',newtext);
        }else{
          this.$message({
            message: '填写错误,请您重新检查并填写',
            type: 'error',
            center:true,
            showClose: true
          });
        }
      },
      //插件改变获取厂家与型号
      changeDevice(){
        this.$data.physicsid="";//物理接口清空
        this.$data.Interfaceid="";//接口ID置为空
        this.$data.address=0;//地址清空
        this.$data.plugListmode=""; //产品型号清空
          this.$data.plugListsupplier=''; //设备厂家清空

          this.$data.devicename=this.$data.devicename;//设备名称新增为空,编辑名称不变

        for( let i=0;i<this.$data.plugList.plugininfolist.length;i++){
          if(this.$data.plugList.plugininfolist[i].pluginid==this.$data.plugnumber){
            this.$data.plugListmode=this.$data.plugList.plugininfolist[i].model;
            this.$data.plugListsupplier=this.$data.plugList.plugininfolist[i].supplier;
            this.$data.pluginterlist=this.$data.plugList.plugininfolist[i].interlist;
          }
        }
      },
      //获取设备类型
      get_sensortype(){
        let that = this;
        let msg = {"cmd":"CGI_DEVICE_GET_SENSORIDLIST"};
        if(window.sessionStorage.getItem('username')=="zyl"){
          this.$ajax.get("../../static/sensor_list.json",msg).then( function(res){
            let sensorlist = new Array();
            $.each(res.data,function(i,value){
              let str = {"sensorid":value,"sensorname":get_chart_sensorlist(value)};
              sensorlist.push(str);
            })
            that.$data.options = sensorlist;
            that.$data.address = 0;
          })
        }else{
          this.$ajax.post("../cgi-bin/main.cgi",msg).then( function(res){
            let sensorlist = new Array();
            $.each(res.data,function(i,value){
              let str = {"sensorid":value,"sensorname":get_chart_sensorlist(value)};
              sensorlist.push(str);
            })
            that.$data.options = sensorlist;

            that.$data.address = 0;
          })
        }
      },
      //改变传感器类型请求插件数据并生成设备ID
      changePlug(){
        let that=this;
        if(this.popuSafe ===false){//点击编辑按钮时不触发下面的操作
          return false;
        }

        that.$data.plugList = {};

        let msg = {"cmd":"CGI_DEVICE_GET_PLUGININFOLIST","sensorid":this.$data.devicetype};
        if(window.sessionStorage.getItem('username')=="zyl"){
          this.$ajax.get("../../static/plugin_list.json",msg).then( function(res){
            $.each(res.data.plugininfolist,function(i,val){

              let  pluginfo_arr = new Array();
              pluginfo_arr  = get_pluginInfo(val["pluginid"]);
              val["supplier"] = pluginfo_arr[0]["supplier"];
              val["model"] = pluginfo_arr[0]["model"];
              $.each(val.interlist,function(n,value){
                val.interlist[n] = get_interType(value);
                let enable_key = get_interType(value);
                res.data.interenabledlist[enable_key]=res.data.interenabledlist[value];
              });
              res.data.plugininfolist[i] = val;
            });

            that.$data.plugList=res.data;
            that.$data.plugnumber="";
            that.$data.deviceid=res.data.deviceid;
            that.$data.physicsid="";
            that.$data.Interfaceid="";
            that.$data.address=0;
            that.$data.devicename="";
          })
        }else{
          this.$ajax.post("../cgi-bin/main.cgi",msg).then( function(res){
            $.each(res.data.plugininfolist,function(i,val){

              let  pluginfo_arr = new Array();
              pluginfo_arr  = get_pluginInfo(val["pluginid"]);
              val["supplier"] = pluginfo_arr[0]["supplier"];
              val["model"] = pluginfo_arr[0]["model"];
              $.each(val.interlist,function(n,value){
                val.interlist[n] = get_interType(value);
                let enable_key = get_interType(value);
                res.data.interenabledlist[enable_key]=res.data.interenabledlist[value];
              });
              res.data.plugininfolist[i] = val;
            });
            that.$data.plugList=res.data;
            that.$data.plugnumber="";
            that.$data.deviceid=res.data.deviceid;
            that.$data.physicsid="";
            that.$data.Interfaceid="";
            that.$data.address=0;
            that.$data.devicename="";
          })
        }
      },
      //改变物理接口型号
      changeInterlist(){
        this.$data.Interfaceid="";//物理接口发生改变接口ID置为空
        this.$data.interlist=this.$data.plugList.interenabledlist[this.$data.physicsid]
      },
      editchange(){
        if(this.$data.popupIndexs==false){
          let that=this;
          let msg = {"cmd":"CGI_DEVICE_GET_PLUGININFOLIST","deviceid":that.$data.deviceid}
          if(window.sessionStorage.getItem('username')=="zyl"){
            this.$ajax.get("../../static/edit_plugin_list.json",msg).then( function(res){

              $.each(res.data.plugininfolist,function(i,val){
                let  pluginfo_arr = new Array();
                pluginfo_arr  = get_pluginInfo(val["pluginid"]);
                val["supplier"] = pluginfo_arr[0]["supplier"];
                val["model"] = pluginfo_arr[0]["model"];
                $.each(val.interlist,function(n,value){
                  val.interlist[n] = get_interType(value);
                  let enable_key = get_interType(value);
                  res.data.interenabledlist[enable_key]=res.data.interenabledlist[value];
                })
                res.data.plugininfolist[i] = val;
              })
              that.$data.plugList=res.data;

              that.$data.deviceid=that.$data.deviceid;

              for( let i=0;i<that.$data.plugList.plugininfolist.length;i++){
                if(that.$data.plugList.plugininfolist[i].pluginid==that.$data.plugnumber){
                  that.$data.plugListmode=that.$data.plugList.plugininfolist[i].model;
                  that.$data.plugListsupplier=that.$data.plugList.plugininfolist[i].supplier;
                  that.$data.pluginterlist=that.$data.plugList.plugininfolist[i].interlist;
                }
              }
              that.$data.interlist=that.$data.plugList.interenabledlist[that.$data.physicsid]
            })

          }else{
            this.$ajax.post("../cgi-bin/main.cgi",msg).then( function(res){
              $.each(res.data.plugininfolist,function(i,val){
                let  pluginfo_arr = new Array();
                pluginfo_arr  = get_pluginInfo(val["pluginid"]);
                val["supplier"] = pluginfo_arr[0]["supplier"];
                val["model"] = pluginfo_arr[0]["model"];
                $.each(val.interlist,function(n,value){
                  val.interlist[n] = get_interType(value);
                  let enable_key = get_interType(value);
                  res.data.interenabledlist[enable_key]=res.data.interenabledlist[value];
                });
                res.data.plugininfolist[i] = val;
              }),
              that.$data.plugList=res.data;
              that.$data.deviceid=that.$data.deviceid;
              for( let i=0;i<that.$data.plugList.plugininfolist.length;i++){
                if(that.$data.plugList.plugininfolist[i].pluginid==that.$data.plugnumber){
                  that.$data.plugListmode=that.$data.plugList.plugininfolist[i].model;
                  that.$data.plugListsupplier=that.$data.plugList.plugininfolist[i].supplier;
                  that.$data.pluginterlist=that.$data.plugList.plugininfolist[i].interlist;
                }
              }
              that.$data.interlist=that.$data.plugList.interenabledlist[that.$data.physicsid]
            })

          }
        }
      }
    },
    //页面渲染数据挂载时弹窗数据的赋值
    mounted(){
      console.log(this.popupData);  //设备列表里的信息
      this.$data.devicetype=this.popupData.sensorid;
      this.$data.deviceid=this.popupData.deviceid;
      this.$data.plugnumber=this.popupData.pluginid;
      this.$data.physicsid=this.popupData.intertype;
      this.$data.Interfaceid=this.popupData.interid;
      this.$data.address=this.popupData.address;
      this.$data.devicename=this.popupData.name;
      this.$data.plugListsupplier=this.popupData.supplier;
      this.$data.plugListmode=this.popupData.model;

      this.$data.disabled=false;

      if(this.popuSafe ===false){//点击编辑按钮时触发下面的操作
        this.editchange();
      }

      if(this.popuSafe ===true){//点击新增按钮时触发下面的操作
        this.get_sensortype();
      }
    }
  }
</script>

<style scoped>
  .drop-enter-active {
    transition: all .5s ease;
  }
  .drop-leave-active {
    transition: all .3s ease;
  }
  .drop-enter {
    transform: translateY(-500px);
  }
  .drop-leave-active {
    transform: translateY(-500px);
  }
  .dialog-wrap {
    position: fixed;
    width: 100%;
    height: 100%;
  }
  .dialog-cover {
    background: #000;
    opacity: .3;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .dialog-content {
    width: 360px;
    height: 300px;
    background: #f5f5f5;
    overflow: hidden;
    position: fixed;
    left: 50%;
    margin-left: -180px;
    top: 50%;
    margin-top: -150px;
    z-index: 101;
    border-radius: 10px;
  }
  .dialog-close {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 20px;
    height: 20px;
    text-align: center;
    cursor: pointer;
  }
  .dialog-close:hover {
    color: #4fc08d;
  }
  .devicepopup{
    width: 360px;
    height: 300px;
    background: #f5f5f5;
    overflow: hidden;
    border-radius: 10px;
  }
  .popupheader{
    height: 40px;
    background: #409EFF;
    width: 100%;
    line-height: 40px;
    color: #fff;
    font-weight: 600;
    letter-spacing: 3px;
    text-indent: 30px;
    position: relative;
  }
  .popupheader .el-button{
    font-size: 20px;
    height: 25px;
    width: 25px;
    padding: 0px;
    margin: 0px;
    float: right;
    margin-right: 15px;
    margin-top: 7px;
    text-indent: 0px;
  }
  .popupcontent{
    height: 220px;
    width: 100%;
    overflow-y:scroll;
  }
  .popupcontent ul li{
    width: 100%;
    height: 40px;
    overflow: hidden;
    margin: 0px;
  }
  .popupcontent ul li span{
    display: block;
    float: left;
    width: 100px;
    margin-left: 30px;
    height: 40px;
    line-height: 40px;
  }
  .popupfooter{
    height: 40px;
    width: 100%;
  }
  .popupbox{
    width: 200px;
    height: 30px;
    overflow: hidden;
    position: relative;
    top: 6px;
  }
  li[data-v-75720746]{
    display: block;
    margin: 0px;
  }
  .el-select{
    display: block;
  }
  .popupfooter .el-button{
    margin-left:75px;
    margin-top: 7px;
    width: 70px;
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: 600
  }
</style>
